<!-- 智能开关 -->
<template>

  <div>
    <van-nav-bar :title="title" left-arrow @click-left="() => $router.go(-1)" @click-right="onClickRight"
      safe-area-inset-top>

      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>

    <div class="kaiguan">



      <div class="btns">
        <van-button class="btn" type="default" @click="allOpen" size="small" color="rgb(94,154,246)">全开</van-button>
        <van-button class="btn" type="default" @click="allClose" size="small" color='rgb(66,224,209)'>全关</van-button>
        <van-button class="btn" type="default" size="small" color="rgb(160,160,160)" @click="timing">定时任务</van-button>
        <van-button class="btn" type="default" size="small" color="rgb(160,160,160)" @click="rename">一键改名</van-button>
      </div>
      <div class="list">
        <div class="item">
          <div class="top">
            <div class="left">
              <div style=" float: left;">{{ content.sw1 }}</div>
              <van-switch v-model="checked1" @input="onInput1" size="24px" style="margin-left:10px"
                inactive-color="#000" />
            </div>


          </div>

        </div>
        <div class="item">
          <div class="top">
            <div class="left">
              <div style="    float: left;">{{ content.sw2 }}</div>
              <van-switch v-model="checked2" @input="onInput2" size="24px" style="margin-left:10px"
                inactive-color="#000" />
            </div>


          </div>

        </div>
        <div class="item" style="margin-top:10px">
          <div class="top">
            <div class="left">
              <div style="    float: left;">{{ content.sw3 }}</div>
              <van-switch v-model="checked3" @input="onInput3" size="24px" style="margin-left:10px"
                inactive-color="#000" />
            </div>


          </div>

        </div>
        <div class="item" style="margin-top:10px">
          <div class="top">
            <div class="left">
              <div style="    float: left;">{{ content.sw4 }}</div>
              <van-switch v-model="checked4" @input="onInput3" size="24px" style="margin-left:10px"
                inactive-color="#000" />
            </div>


          </div>

        </div>

      </div>
    </div>


  </div>

</template>

<script>
import { Toast, Dialog } from 'vant';

import { deviceInfo, deviceControl, deviceControlAll, deviceData } from "../../api/device";
export default {
  name: "",
  data() {
    return {
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      info: [],
      content: {},
      data: [],
      show: true,
      title: ""
    };
  },
  methods: {
    // 定时任务
    onClickRight() { },
    timing() {
      this.$router.push({ path: '/timing-switch', query: { code: this.$route.query.code } })
    },
    // 开关改名
    rename() {
      this.$router.push({ path: '/switch-rename', query: { code: this.$route.query.code } })
    },
    onInput1() {

      deviceControl({ code: this.$route.query.code, addr: "40001", value: this.checked1 });

    },
    onInput2() {
      deviceControl({ code: this.$route.query.code, addr: "40002", value: this.checked2 });
    },
    onInput3() {
      deviceControl({ code: this.$route.query.code, addr: "40003", value: this.checked3 });
    },
    onInput4() {
      deviceControl({ code: this.$route.query.code, addr: "40004", value: this.checked4 });
    },
    async getData() {
      


      let res = await deviceData({ code: this.$route.query.code });
 
      if (res.status == 200) {

        let device = res.device;
        console.log("device", device)
        this.content = JSON.parse(device.content);
        let data = res.data;

        this.title = device.name;

        console.log("ssss", data.regs[0].value);

        if (data.regs[0].value == "true") {
          this.checked1 = true;
        } else {
          this.checked1 = false;
        }
        if (data.regs[1].value == "true") {
          this.checked2 = true;
        } else {
          this.checked2 = false;
        }
        if (data.regs[2].value == "true") {
          this.checked3 = true;
        } else {
          this.checked3 = false;
        }
        if (data.regs[3].value == "true") {
          this.checked4 = true;
        } else {
          this.checked4 = false;
        }




      }
    },
    async allOpen() {
      let res = await deviceControlAll({ code: this.$route.query.code, value: true });
      if (res.status == 200) {
        this.getData();
      }
    },
    async allClose() {
      let res = await deviceControlAll({ code: this.$route.query.code, value: false });
      if (res.status == 200) {
        this.getData();
      }
    },
  },
  computed: {},
  watch: {},
  async created() {




    this.getData();

  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.kaiguan {
  width: 100%;
  height: 100%;
  padding: 30px 40px;

  .btns {
    margin-bottom: 20px;

    .btn {
      color: #fff;
      width: 150px;
      border-radius: 15px;
    }

    .btn~.btn {
      margin-left: 15px;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      padding: 10px 20px;
      width: 47%;
      height: 150px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 25px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left :first-child {
          font-size: 34px;
        }

        .left :last-child {
          color: rgb(94, 94, 94);
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #acacac;
      }
    }
  }
}
</style>
